<template>
  <div>
    <!-- 头 -->
    <div id="header">
      <div class="content">
        <h1 id="logo" @click="toMenu">top论坛</h1>

        <div class="userInfo" v-if="!isLogin">
          <router-link to="/login">登录</router-link>
          <router-link to="/register">注册</router-link>
        </div>
        <el-dropdown class="userInfo" @command="commandHandler" v-if="isLogin">
                      <span class="el-dropdown-link">
                        <i style="cursor: pointer">{{user.username}}</i>
                      </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="userinfo">个人中心</el-dropdown-item>
            <el-dropdown-item command="admin" v-if="isAdmin==1">后台管理</el-dropdown-item>
            <el-dropdown-item command="logout">注销登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>

    </div>



    <!-- 主体 -->
    <div id="body" class="content">
      <router-view :isLogin="isLogin" v-on:Login="login" ></router-view>
    </div>
  </div>
</template>

<script>

export default {
  name: "Home",
  data() {
    return {
      isLogin: false,
      user: '',
      tags:[],
      isAdmin :0
    }
  },
  methods: {
    commandHandler(command) {
      if (command === 'logout') {
        this.$confirm('此操作将注销登录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //清空用户信息
          window.sessionStorage.removeItem('token');
          window.sessionStorage.removeItem('user');
          this.isLogin=false;
          this.$message.success("注销成功")
          this.$router.replace('/')
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });
        });
      }
      if (command === 'userinfo') {
        this.$router.push('/user');
      }
      if (command === 'admin') {
        this.$router.push('/admin')
      }
    },
    toMenu(){
      this.$router.push('/')
    },
    login(val){
      this.isAdmin = val
      this.isLogin=true;
      this.user=JSON.parse(sessionStorage.getItem('user'))
    }
  },
  created() {
    console.log(this.$route.path)
    if (sessionStorage.getItem("token") && sessionStorage.getItem("user")) {
      this.isLogin = true
      this.user = JSON.parse(sessionStorage.getItem("user"))
      this.isAdmin = this.user.admin
    }
  }
}
</script>

<style scoped>
#header {
  width: 100%;
  line-height: 60px;
  background-color: #ffffff;
  box-shadow: 0 0px 3px 0 rgba(0,0,0,.02), 0 4px 8px 0 rgba(0,0,0,.02)
}
#logo {
  cursor: pointer;
  font-size: 32px;
  color: #409EFF;
  display: inline-block;
}
#header .el-input {
  width: 30%;
  margin-left: 40px;
}
.content {
  width: 75%;
  margin: auto;
}

.userInfo{
  display: inline-block;
  float: right;
}

div>a:hover{
  color: #409EFF;
}
div>a{
  display: inline-block;
  margin-left: 20px ;
}

#body{
  margin-top: 30px;
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 0px 3px 0 rgba(0,0,0,.02), 0 4px 8px 0 rgba(0,0,0,.02)
}
</style>